<template>
  <div>
    <el-card style="min-width: 1200px">
      <el-row>
        <div class="tableSelectWrap">
          <el-form ref="ruleForm" :model="commandForm" label-width="100px">
            <el-col :span="7">
              <el-form-item label="选择时间" prop="date">
                <el-date-picker
                  :default-time="['00:00:00', '23:59:59']"
                  style="width: 100%"
                  v-model="commandForm.date"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetimerange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="7" :offset="1">
              <el-form-item label="操作人" prop="userName">
                <el-select
                  v-model="commandForm.userName"
                  style="width: 100%"
                  placeholder="请选择操作人"
                >
                  <el-option
                    v-for="(item, index) in userNameList"
                    :key="index"
                    :label="userNameList[index]"
                    :value="userNameList[index]"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7" :offset="1">
              <el-button class="width120" @click="resetForm('ruleForm')"
                >重置</el-button
              >
              <el-button type="primary" class="width120" @click="()=>{
               this.dataForm=JSON.parse(JSON.stringify(this.commandForm));
               this.handleQuery()
              }"
                >查询</el-button
              >
            </el-col>
          </el-form>
        </div>
      </el-row>
    </el-card>
    <el-card style="margin-top: 15px; min-width: 1200px">
      <el-table :data="dataList">
        <template slot="empty">
          <el-empty
            :image="require('@/assets/imgs/middleWork/k1.png')"
            :image-size="80"
            description="暂无相关数据"
          ></el-empty>
        </template>
        <el-table-column
          show-overflow-tooltip
          prop="gmtCreated"
          align="center"
          label="时间"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.gmtCreated ? scope.row.gmtCreated : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="userName"
          align="center"
          label="账号"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.userName ? scope.row.userName : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="appName"
          align="center"
          label="应用"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.appName ? scope.row.appName : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="operation"
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.operation ? scope.row.operation : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="operationObj"
          align="center"
          label="操作对象"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.operationObj ? scope.row.operationObj : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="ip"
          align="center"
          label="IP"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.ip ? scope.row.ip : "-" }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-pagination
      layout="prev, pager, next, sizes, jumper"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      :current-page="pageNum"
      :total="total"
      @current-change="pageCurrentChangeHandle"
      @size-change="pageSizeChangeHandle"
    >
    </el-pagination>
  </div>
</template>

<script>
import mixin from "@/mixins/mixin";
export default {
  name: "operationLog",
  mixins: [mixin],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: "/api/log/pageLogs",
        createdIsNeed:false,
      },
      userNameList: [],
      commandForm: {
        date: [],
        userName: "",
      },
      dataList: [],
    };
  },
  created() {
    this.dataForm=JSON.parse(JSON.stringify(this.commandForm))
    this.handleQuery()
    this.$http.post("/api/log/getLogUserList").then((res) => {
      if (res.code === "0000") {
        this.userNameList = res.data;
      }
    });
  },
  methods: {
    handleQuery() {
      if (this.dataForm.date && this.dataForm.date.length) {
        this.dataForm.gmtCreatedBegin = this.dataForm.date[0];
        this.dataForm.gmtCreatedEnd = this.dataForm.date[1];
      } else {
        this.dataForm.gmtCreatedBegin = "";
        this.dataForm.gmtCreatedEnd = "";
      }
      this.getDataList();
    },
  },
};
</script>

<style scoped lang="scss">
:deep(.el-form-item) {
  margin-bottom: 0;
}
</style>
